<template>
  <div style="padding: 15px">
    <el-form ref="form" :rules="rules" :model="form" label-width="120px">
      <el-form-item label="姓名" prop="userName">
        <el-input v-model="form.userName" :disabled="true"/>
      </el-form-item>
      <el-form-item label="手机号" prop="userPhone">
        <el-input v-model="form.userPhone" :disabled="true"/>
      </el-form-item>
      <el-form-item label="开户姓名" prop="name">
        <el-input v-model="form.name" placeholder="请输入开户姓名" clearable />
      </el-form-item>
      <el-form-item label="银行预留手机号" prop="mobile">
        <el-input v-model="form.mobile" placeholder="请输入银行预留手机号" clearable />
      </el-form-item>
      <el-form-item label="银行卡号" prop="account">
        <el-input v-model="form.account" placeholder="请输入银行卡号" clearable />
      </el-form-item>
      <el-form-item label="开户银行" prop="bankNo">
        <el-select v-model="form.bankNo" placeholder="请选择" @change="getCityList" clearable>
          <el-option
            v-for="item in bankList"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="开户行省份" prop="provinceCode">
        <el-select v-model="form.provinceCode" placeholder="请选择" @change="getCityList" clearable>
          <el-option
            v-for="item in provinceList"
            :key="item.provinceCode"
            :label="item.provinceName"
            :value="item.provinceCode"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="开户行城市" prop="cityCode">
        <el-select v-model="form.cityCode" placeholder="请选择" clearable>
          <el-option
            v-for="item in cityList"
            :key="item.cityCode"
            :label="item.cityName"
            :value="item.cityCode"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="开户网点" prop="branche">
        <el-input v-model="form.branche" placeholder="请输入开户网点" clearable/>
      </el-form-item>
      <el-form-item label="账户类型" prop="type">
        <el-radio-group v-model="form.type">
          <el-radio :label="1">个人账户</el-radio>
          <el-radio :label="2">企业账户</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否是默认卡" prop="isDefault">
        <el-switch
          v-model="form.isDefault"
          active-color="#13ce66"
          inactive-color="#DDDDDD"
          :active-value="1"
          :inactive-value="0"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="funcCancel">取 消</el-button>
        <el-button type="primary" @click="funcSubmit">确 定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import Vue from "vue";
import "xe-utils";
import VXETable from "vxe-table";
import "vxe-table/lib/index.css";
import request from "@/utils/request";
import { validatePhone, validateBankCardNum } from "@/utils/validate.js";
import { getListDict } from "@/api/commonApi";
Vue.use(VXETable);
export default {
  name: "BankCardEdit",
  data() {
    return {
      loading: false,
      userOptions: [],
      provinceList: [],
      cityList: [],
      bankList: [],
      form: {},
      rules: {
        partyCode: [
          { required: true, message: "请选择人员", trigger: "change" }
        ],
        name: [
          { required: true, message: "请输入开户姓名", trigger: "blur" }
        ],
        mobile: [
          {
            required: true,
            validator(rule, value, callback) {
              validatePhone(value)
                ? callback()
                : callback(new Error("手机号格式有误"));
            },
            trigger: "blur"
          }
        ],
        account: [
          {
            required: true,
            validator(rule, value, callback) {
              validateBankCardNum(value)
                ? callback()
                : callback(new Error("银行卡号格式有误"));
            },
            trigger: "blur"
          }
        ],
        bankNo: [
          { required: true, message: "请选择开户银行", trigger: "change" }
        ],
        provinceCode: [
          { required: true, message: "请选择开户省份", trigger: "change" }
        ],
        cityCode: [
          { required: true, message: "请选择开户城市", trigger: "change" }
        ],
        type: [{ required: true, message: "请选择账户类型", trigger: "blur" }]
      }
    };
  },
  methods: {
    // 获取页面信息
    getInfo(code) {
      this.form = {};
      this.getProvinceList();
      this.selectDict();
      // this.queryUser();
      this.CheckDetails(code);
    },
    //查询详情
    CheckDetails(code) {
      // 查询到数据之前先展示空表单
      request({ url: `/arpa-basic-api/bankCard/${code}`, method: "get" }).then(
        response => {
          this.form = response.data;
        }
      );
    },
    // 获取省列表
    getProvinceList() {
      request({ url: "/arpa-basic-api/areaProvince", method: "get" }).then(
        response => {
          this.provinceList = response.data.records;
        }
      );
    },
    // 获取市列表
    getCityList() {
      this.cityList = [];
      this.form.city = "";
      request({
        url: "/arpa-basic-api/areaCity",
        method: "get",
        params: { provinceCode: this.form.provinceCode }
      }).then(response => {
        this.cityList = response.data.records;
      });
    },
    // 提交
    funcSubmit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          const rLoading = this.openLoading();
          const data = this.form;
          request({
            url: "/arpa-basic-api/bankCard",
            method: "put",
            params: data
          })
            .then(response => {
              rLoading.close();
              this.$message({ message: response.msg, type: "success" });
              this.$emit("fatherEditMethod");
            })
        } else {
          return false;
        }
      });
    },
    // 查询人员下拉选
    queryUser(query) {
      if (query !== "") {
        const data = {
          nameOrPhone: query,
          partyTypeList: ["DRIVER", "DRIVER_LEADER", "SHIPMENT", "SHIPMENT_COMPANY"]
        };
        request({
          url: "/arpa-basic-api/party/selectUser",
          method: "post",
          data: data
        }).then(response => {
          this.userOptions = response.data;
        });
      } else {
        this.userOptions = [];
      }
    },
    // 获取数据字典： 银行
    selectDict() {
      getListDict({ types: "bank" }).then(response => {
        this.bankList = response.data.filter(item => item.type === "bank")[0][
          "dictList"
        ];
      });
    },
    // 拼接名字和手机
    contractNameAndPhone(item) {
      return item.name + "(" + item.phone + ")";
    },
    // 取消
    funcCancel() {
      this.$emit("fatherCancelMethod", "edit");
    }
  }
};
</script>
<style lang="scss" scoped>
.el-cascader {
  width: 100%;
}
.el-select {
  width: 100%;
}
.el-date-editor {
  width: 100%;
}
</style>
